<template>
    <div class="user">
        <van-nav-bar title="会员权益" left-text="" right-text="" left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon name="cross" size="19" color="#000" />
            </template>
            <!-- <template #right>
                <van-icon name="ellipsis" size="22" color="#000" />
            </template> -->
        </van-nav-bar>


        <div style="width: 100%;height: 263px;background-color: #292728;z-index: -999">
            <div class="userImg">
                <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="" srcset="">
                <img v-else src="../../assets/w700d1q75cms.jpg" style="display: inline-block;">
                <div class="name" style="display: inline-block;">{{ userInfo.username }}</div>
                <div style="display: block;position: absolute;">
                    <div class="name2" style="margin-left: 65px;padding-top: 30px;">当前会员等级</div>
                </div>
            </div>

            <div style="width: 400px;margin-top: 20px;">
                <img v-if="userInfo.level == 1" src="../../assets/my/vip01.png" alt="" srcset=""
                    style="width:100%;height: 47px">
                <img v-else-if="userInfo.level == 2" src="../../assets/my/vip02.png" alt="" srcset=""
                    style="width:100%;height: 47px">
                <img v-else-if="userInfo.level == 3" src="../../assets/my/vip03.png" alt="" srcset=""
                    style="width:100%;height: 47px">
                <img v-else-if="userInfo.level == 4" src="../../assets/my/vip04.png" alt="" srcset=""
                    style="width:100%;height: 47px">
                <img v-else-if="userInfo.level == 5" src="../../assets/my/vip05.png" alt="" srcset=""
                    style="width:100%;height: 47px">
            </div>

            <div style="position: absolute;margin-left: 3%;margin-top: 10px;z-index: 3;" class="imagebg">
                <div
                    style="width: 58px;height: 24px;background: rgba(196,210,231,0.6);border-radius: 10px 0px 10px 0px;font-family: MiSans, MiSans;font-weight: 400;font-size: 12px;color: #474747;padding-left: 10px;padding-top:10px">
                    当前等级</div>
                <!-- <img src="../../assets/my/vipbg.png" alt="" srcset="" style="width: 325px;height: 130px;"> -->
                <div style="margin-left: 15px;margin-top: 15px;">
                    <img v-if="userInfo.level == 1" src="../../assets/my/vip001.png" alt="" srcset=""
                        style="width:70px;height: 36px;">
                    <img v-if="userInfo.level == 2" src="../../assets/my/vip002.png" alt="" srcset=""
                        style="width:70px;height: 36px;">
                    <img v-if="userInfo.level == 3" src="../../assets/my/vip003.png" alt="" srcset=""
                        style="width:70px;height: 36px;">
                    <img v-if="userInfo.level == 4" src="../../assets/my/vip004.png" alt="" srcset=""
                        style="width:70px;height: 36px;">
                    <img v-if="userInfo.level == 5" src="../../assets/my/vip005.png" alt="" srcset=""
                        style="width:70px;height: 36px;">
                </div>
                <div
                    style="font-family: MiSans, MiSans;font-weight: 400;font-size: 12px;color: #505050;margin-left: 15px;margin-top: 20px;">
                    还需消费{{userInfo.money_cha}}元 | 邀请{{userInfo.share_cha}}人升级到VIP{{(userInfo.level)+1}}获得更多权益
                </div>
            </div>
        </div>
        <div
            style="width: 100%;height: 60vh;border-radius: 30px 30px 0px 0px;z-index: 2;position: absolute;top: 300px;background-color: #fff;">
            <div style="display: flex;margin-top: 100px;">
                <div
                    style="width: 4px;height: 15px;background: #D59760;border-radius: 0px 0px 0px 0px;margin-left: 15px;">
                </div>
                <div
                    style="width: 136px;height: 23px;font-family: MiSans, MiSans;font-weight: 500;font-size: 17px;color: #000000;margin-left: 12px;">
                    会员权益</div>

                <div
                    style="width: 223px;height: 17px;font-family: MiSans, MiSans;font-weight: 400;font-size: 13px;color: #595959;margin-top: 6px;">
                    当前等级为VIP{{(userInfo.level)}} 可享受以下会员权益
                </div>
            </div>

        </div>


        <div style="position: absolute;top: 430px;z-index: 2;display: flex;width: 100%;">
            <div
                style="width: 180px;height: 76px;background: #FFFFFF;border-radius: 8px;border: 1px solid #F4D498;margin-left: 4%;display: flex;">
                <img src="../../assets/my/vipuuu.png" alt="" srcset="" style="width:49px;height: 49px;margin: 11px;">
                <div
                    style="width: 64px;height: 21px;font-family: MiSans, MiSans;font-weight: 500;font-size: 16px;color: #181818;margin-top: 15px;">
                    选购单价
                </div>
                <div
                    style="width: 100px;height: 17px;font-family: MiSans, MiSans;font-weight: 400;font-size: 12px;color: #666666;position: absolute;margin-top: 40px;margin-left: 70px;">
                   {{userInfo.level_array.max_money}}以内商品
                </div>
            </div>

            <div
                style="width: 180px;height: 76px;background: #FFFFFF;border-radius: 8px;border: 1px solid #F4D498;margin-left: 4%;display: flex;">
                <img src="../../assets/my/vipioio.png" alt="" srcset="" style="width:49px;height: 49px;margin: 11px;">
                <div
                    style="width: 64px;height: 21px;font-family: MiSans, MiSans;font-weight: 500;font-size: 16px;color: #181818;margin-top: 15px;">
                    委托单价
                </div>
                <div
                    style="width: 100px;height: 17px;font-family: MiSans, MiSans;font-weight: 400;font-size: 12px;color: #666666;position: absolute;margin-top: 40px;margin-left: 70px;">
                    {{userInfo.level_array.max_price}}以内商品
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getlevel } from '@/api/user'

export default {
    name: 'User',
    components: {

    },
    data() {
        return {

        };
    },
    mounted() {
        this.getlevel()
    },
    methods: {
        getlevel() {
            getlevel().then((res) => {
                console.log(res);

            })
        },
        onClickLeft() {
            this.$router.back()
        }
    },

    computed: {
        ...mapGetters(['userInfo'])
    }
}
</script>

<style lang="scss" scoped>
.imagebg {
    background-image: url('../../assets/my/vipbg.png');
    background-size: 100% 100%;
    width: 94%;
    height: 260px;
}

.userImg {
    padding-top: 78px;
    margin-left: 30px;
    display: flex;

    img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }

    .name {
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 32px;
        color: #FFFFFF;
        margin-left: 20px;
    }

    .name2 {
        font-family: MiSans, MiSans;
        font-weight: 400;
        font-size: 24px;
        color: #B0B0B0;
    }
}
</style>